<template>
  <u-popup :show="modalshow" mode="bottom" round="20">
    <view class="ptcontent">
      <view class="title">{{ $z.$t("配套设施") }}</view>
      <!-- {{ $z.$t("配套设施") }} -->
      <view class="itemtitle"></view>
      <view class="list">
        <view
          class="ptitem"
          :class="actilist.indexOf(item) > -1 ? 'active' : ''"
          v-for="(item, key) in pt"
          :key="key"
          @click="itemtap(item)"
        >
          {{ item }}
        </view>
      </view>
      <view style="height: 100rpx"></view>
      <view class="u-flex">
        <u-button
          text="取消"
          :customStyle="{ marginRight: `20rpx` }"
          @click="close()"
        ></u-button>
        <u-button type="primary" text="确定" @click="save()"></u-button>
      </view>
      <view style="height: 100rpx"></view>
    </view>
  </u-popup>
</template>

<script>
  export default {
    name: "pt",
    data() {
      return {
        modalshow: false,
        actilist: [],
      };
    },
    computed: {
      pt() {
        return this.$store.state.config.pt.map((e) => {
          return this.$z.$t(e);
        });
      },
    },
    methods: {
      scroll(e) {
        console.log(e);
      },
      show(str) {
        this.actilist = str.split(",").filter((e) => {
          return e != "";
        });
        this.modalshow = true;
      },
      close() {
        this.actilist = [];
        // this.$emit("save", []);
        this.modalshow = false;
      },
      itemtap(item) {
        let index = this.actilist.indexOf(item);
        if (index > -1) {
          this.actilist.splice(index, 1);
        } else {
          this.actilist.push(item);
        }
      },
      save() {
        this.$emit("save", this.actilist.join());
        this.modalshow = false;
      },
    },
  };
</script>

<style lang="scss">
  .ptcontent {
    padding: 0 30rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
      // text-align: center;
      // padding: 20rpx 0;
      // padding-left: 40rpx;
      display: flex;
      align-items: flex-end;
      height: 80rpx;
    }

    .itemtitle {
      font-size: 30rpx;
      color: $uni-text-color-grey;
      height: 100rpx;
      display: flex;
      align-items: center;
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .ptitem {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
        background-color: #f7f7f7;
        width: 220rpx;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        border-radius: 10rpx;

        &.active {
          background-color: rgba($color: $u-primary, $alpha: 0.1);
          border: 2rpx solid $u-primary;
          color: $u-primary;
        }
      }
    }
  }
</style>
